<html>
<head>
<style type="text/css">
#out{
	background-color:#000022;
	color:#fafaff;
	font-family:courier, monospace;
	font-size:10px;
	padding:5px;
	margin:5px;
	width:500px;
	height:200px;
}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id);}

function write(msg){$("out").innerHTML+=msg;}
function writeLine(msg){write(msg+"<br>")}
function cls(){$("out").innerHTML = "";}

function each(coll, F){
	if(coll.length){
		for(var i=0; i<coll.length; i++){
			F(coll[i], i);
		}
	}
	else{
		for(var k in coll){
			F(coll[k], k);
		}
	}
}

function srvAdd(x, y, onload){
	window.setTimeout(function(){onload(x+y);}, 500);
}

function srvMul(x, y, onload){
	window.setTimeout(function(){onload(x*y);}, 800);
}

function Synchronization(pids){var _=this;
	each(pids, function(pid){
		_.processes[pid] = false;
	});
}

Synchronization.prototype = {
	processes:{},
	data:{},
	start: function(pid, data){var _=this;
		_.processes[pid] = true;
		_.data[pid] = data;
		var done = true;
		each(_.processes, function(p){
			if(!p)
				done = false;
		});
		if(done)
			_.nextAction();
	},
	nextAction:function(){
		writeLine("Synchronized: "+this.data.srvAdd+", "+this.data.srvMul);
	}
};

function startServAdd(x, y){
	srvAdd(x, y, function(res){
		writeLine(x+"+"+y+"="+res);
	});
}

function startServMul(x, y){
	srvMul(x, y, function(res){
		writeLine(x+"*"+y+"="+res);
	});
}

function startServices(){
	var sync = new Synchronization(["srvAdd", "srvMul"]);
	
	srvAdd(3, 2, function(res){
		sync.start("srvAdd", res);
	});
	
	srvMul(3, 2, function(res){
		sync.start("srvMul", res);
	});
}

</script>
</head>
<body>
<h1>Services Sample Demo Page</h1>
<p>
	<button onclick="startServices()">start services</button>
	<button onclick="startServAdd(3, 2)">add(3,2)</button>
	<button onclick="startServMul(3, 2)">mul(3,2)</button>
	<button onclick="cls()">clear screen</button>
</p>

<div id="out"></div>
</body>
</html>